<template>
    <div class="fenbao-add">
        <a-modal width="1000px" :visible="visible" :title="modalOption.title" @ok="modalOption.onOk"
            :dialog-style="{ top: '20px' }" @cancel="modalOption.onCancel" :okText="modalOption.okText"
            :cancelText="modalOption.cancelText" class="yuan-modal fenbao-add-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-title">{{detailData.varietyName}}</div>
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="品名">
                                <span class="yuan-form-show">{{ detailData.varietyName }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="生产批号">
                                <span class="yuan-form-show">{{ detailData.productionBatch }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="产品大类">
                                <span class="yuan-form-show">{{ detailData.productBigKind}}</span>
                            </a-form-model-item>
<!--                            <a-form-model-item class="yuan-form-item" label="存货代码">-->
<!--                                <span class="yuan-form-show">{{ detailData.inventoryCode }}</span>-->
<!--                            </a-form-model-item>-->
<!--                            <a-form-model-item class="yuan-form-item" label="发药机编码">-->
<!--                                <span class="yuan-form-show">{{detailData.dispensingMachineCoder}}</span>-->
<!--                            </a-form-model-item>-->
                            <a-form-model-item class="yuan-form-item" label="装量">
                                <span class="yuan-form-show">{{ detailData.discretion }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="生产日期">
                                <span class="yuan-form-show">{{ detailData.productionTime }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="保质期">
                                <span class="yuan-form-show">{{ detailData.expirationDate }}月</span>
                            </a-form-model-item>
                        </div>
                    </div>

                    <div class="form-panel">
                        <div class="form-panel-title">分包</div>
                        <div class="form-panel-box">
                            <a-form-model-item class="yuan-form-item yuan-form-col5" label="投料量" prop="putIntoNum">
                                <span class="yuan-form-show">{{ detailData.putIntoNum }}{{detailData.unit}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item yuan-form-col5" label="每包装量" prop="discretion">
                                <span class="yuan-form-show">{{ detailData.discretion }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item yuan-form-col5" label="分包数量" prop="subpackageNum">
                                <a-input suffix="包" class="yuan-form-input" v-model="formData.subpackageNum"
                                    placeholder="请输入"></a-input>
                            </a-form-model-item>

                        </div>
                    </div>
                </a-form-model>
            </a-spin>

        </a-modal>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :infoId="infoId" :infoDetail="formData"
            :isPreview="true" @submit="submit" />
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi from "@/api/nextApi";
import DetailVue from "./detail.vue";
@Component({
    name: "ProductAdd",
    components: { DetailVue },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) infoId!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) this.getDetail();
    }
    pageReady = false;
    detailVisible = false;
    formLoading = false;
    modalOption = {
        title: "分包",
        okText: "提交",
        cancelText: "取消",
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    rules = {
        discretion: [{ required: true, message: "", trigger: "blur" }],
        subpackageNum: [{ required: true, message: "请输入分包数量", trigger: "blur" }],
    };
    formData: any = {};
    detailData: any = {};
    resetForm() {
        this.formData = {};
    }
    async mounted() {
        this.resetForm();
    }
    closeModal() {
        this.resetForm();
        this.pageReady = false;
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }
    modalOk() {
        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                this.detailVisible = true;
            }
        });
    }
    async submit() {
        this.formLoading = true;
        try {
            const res = await nextApi.setAuditDetail(this.formData);
            this.$message.success(res.msg);
            this.detailVisible = false;
            this.closeModal();
            this.$emit("resetList");
        } finally {
            this.formLoading = false;
        }
    }
    async getDetail() {
        this.formLoading = true;
        try {
            if (this.infoId) {
                const res = await nextApi.getAuditSubDetail({ id: this.infoId });
                this.detailData = { ...res.data };
            } else {
                this.detailData = {};
            }
            let num = 0;
            const putIntoNum = this.detailData.putIntoNum;
            const discretion = this.detailData.discretion;
            if (this.detailData.unit === "kg") {
                if (discretion.indexOf("kg") >= 0) {
                    num = putIntoNum / parseFloat(discretion);
                } else if (discretion.indexOf("g") >= 0) {
                    num = (putIntoNum * 1000) / parseFloat(discretion);
                }
            } else if (this.detailData.unit === "g") {
                if (discretion.indexOf("kg") >= 0) {
                    num = putIntoNum / 1000 / parseFloat(discretion);
                } else if (discretion.indexOf("g") >= 0) {
                    num = putIntoNum / parseFloat(discretion);
                }
            }
            num = Math.floor(num);
            this.formData = { id: this.infoId, subpackageNum: num, subpackageState: 1 };
            this.pageReady = true;
        } finally {
            this.formLoading = false;
        }
    }
}
</script>
<style lang="scss">
</style>
